<template>
    <div class="form-group">
        <label>数据清理</label>
        <div class="clear-data-group">
            <div class="clear-options">
                <button class="secondary-button" @click="clearLocalStorage">清除本地存储</button>
                <button class="secondary-button" @click="clearSessionStorage">清除会话存储</button>
                <button class="secondary-button" @click="clearCookies">清除Cookie</button>
                <button class="danger-button" @click="clearAllData">清除所有数据</button>
            </div>
        </div>
    </div>
</template>

<script setup>
// Emits
const emit = defineEmits([
    'clear-all-data',
    'clear-local-storage',
    'clear-session-storage',
    'clear-cookies'
])

// 方法
function clearAllData() {
    emit('clear-all-data')
}

function clearLocalStorage() {
    emit('clear-local-storage')
}

function clearSessionStorage() {
    emit('clear-session-storage')
}

function clearCookies() {
    emit('clear-cookies')
}
</script>

<style scoped>
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.clear-data-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clear-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.secondary-button,
.danger-button {
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.secondary-button {
    background-color: #f0f0f0;
    color: #333;
}

.secondary-button:hover {
    background-color: #d9d9d9;
}

.danger-button {
    background-color: #ff4d4f;
    color: white;
}

.danger-button:hover {
    background-color: #ff7875;
}
</style>